<!-- 学分任务 组件 -->

<template>
	<!-- 组件大块 -->
	<view class="tabbar-study-task-comp-shell">
		
		<view class="tabbar-study-task-bg-block">
			<image class="tabbar-study-task-img-bg" src="http://jjboss.oss-cn-hangzhou.aliyuncs.com/aqattach/20221026/ed3908a7b86d99ee02ac2f06cc1e3ed6.png"></image>
		</view>
		
		<!-- 学分统计信息容器 -->
		<view class="tabbar-study-task-bg-block">
			
			<view>
				<view style="height: 34rpx;"></view>
					<view style="color: white;font-size: 32rpx;font-weight: 500;margin-bottom: 14rpx;">入场学习</view>
			</view>
			
			<!-- 任务学分数值块 -->
			<focus-box 
				mode="row" 
				width="750" 
				align="center"
				justify="center" 
			>
				
				<!-- 必修学分 -->
				<focus-box 
					mode="col" 
					width="200" 
					align="center"
					justify="center" 
				>
					<focus-text 
						size="36" 
						color="white"
						:text="statistics.total"
					></focus-text>
					<focus-text 
						size="28" 
						color="white" 
						text="需修学时" 
						:styles="{'opacity':0.8}"
					></focus-text>
				</focus-box>
				
				<!-- 完成率容器 -->
				<focus-box 
					mode="col" 
					width="270" 
					height="270" 
					align="center"
					justify="center" 
					position="relative"
				>
					<view style="display: flex;align-items: center;justify-content: center;width: 270rpx;height: 270rpx;">
						<image
							style="width:230rpx; height:230rpx;" 
							src="http://jjboss.oss-cn-hangzhou.aliyuncs.com/aqattach/20221027/f81849d0b8d74cd22628269dfbc623bc.png"
						/>
						
					</view>
					<!-- 进度文字容器 -->
					<focus-box 
						top="0"
						left="0" 
						mode="col" 
						width="270" 
						height="270" 
						align="center"
						justify="center" 
						position="absolute" 
					>
						<!-- 百分比 -->
						<focus-text 
							size="42" 
							weight="bold"
							color='#FC8444'
							:text="statistics.baifenbi+'%'"
						></focus-text
						>
						<!-- 完成率 -->
						<focus-text 
							size="28" 
							text="完成率"
							color='#FC8444'
						></focus-text>
					</focus-box>
				</focus-box>
				
				<!-- 选修学分 -->
				<focus-box 
					mode="col" 
					width="200" 
					align="center"
					justify="center" 
				>
					<focus-text 
						size="36" 
						color="white"
						:text="statistics.sum"
					></focus-text>
					<focus-text 
						size="28" 
						color="white" 
						text="已修学时" 
						:styles="{'opacity':0.8}"
					></focus-text>
				</focus-box>
				
			</focus-box>
			
			<!-- 记录按钮区域 -->
			<focus-box 
				mode="row" 
				width="750" 
				align="center"
				justify="center" 
				:padding="[0,0,25,0]" 
			>
				<!-- 学分记录按钮 -->
				<focus-box 
					mode="row" 
					height="56" 
					radius="28" 
					align="center"
					justify="center" 
					bg="rgba(255,255,255,0.2)" 
					:padding="[0,32]" 
					@click="historyBtnClick"
				>
					<focus-text 
						size="24"
						color="white" 
						text="我的学时"
					></focus-text>
					<focus-box 
						width="12" 
						height="12"
					></focus-box>
					<focus-icon 
						size="20" 
						color="white" 
						name="fi-right"
					></focus-icon>
				</focus-box>
			</focus-box>
			
		</view>
	</view>
</template>


<script>
	// 接口请求文件引入
	import requestAll from '@/common/js/request/allRequest.js';
	
	/**
	 * 学分任务组件
	 * @description 学分任务组件，杜先生开发
	 * @property {String} tag 组件标识，默认：task-score
	 * @property {String,Number} person = [1|2] 身份类型，默认：2
	 *   @value 1 管理人员
	 *   @value 2 作业人员，默认
	 *   @value 3 监督人员
	 * @property {String} random 随机字符串
	 * @event {Function()} finished 接口请求执行完毕
	 * @event {Function()} logintouch 登录事务触发
	 */
	export default {
		name: 'task-score-enter',
		props: {
			bool: { type: Boolean, required : true },//触发刷新数据
			enterId :{ type:Number ,required:true},
		},
		
		// 页面数据
		data() {
			return {
				userInfo:{},
				// 统计数据信息
				statistics: {},
			}
		},
		watch: {
			bool: {
				handler(newV, oldV) {
					this.userInfo = uni.getStorageSync('eduInfo')
					this.scoreForStudyReq();
				},
				immediate: true,
			}
		},
		
		created(){},
		// 实例挂载完毕
		mounted() {},
		
		// 页面事件
		methods: {
			
			// 学分记录按钮 点击
			historyBtnClick() {
				uni.navigateTo({
					url:`/pagesB/pages/enterLearn/index?ag_project_id=${this.enterId}`
				})
			},
			
			
			// ============================================= 接口请求
			// 获取用户学分统计
			scoreForStudyReq() {
				requestAll.getEnterScore({
					success:(res) => {
						this.statistics = res.data
					}
				})
			},
			
		},
		
	}
</script>


<style>
	/* 外层组件块 */
	.tabbar-study-task-comp-shell{
		width: 750rpx; height: 594rpx;
		/* padding-bottom: 108rpx; */
		position: relative;
		display: flex; 
		flex-direction: column;
		justify-content: flex-start; 
		align-items: center;
	}
	/* 绝对定位容器 */
	.tabbar-study-task-bg-block{
		width: 750rpx; height: 514rpx;
		position: absolute; left: 0; right: 0;
		display: flex; flex-direction: column; justify-content: flex-start; align-items: center;
	}
	/* 背景图片尺寸 */
	.tabbar-study-task-img-bg{ width: 750rpx; height: 680rpx; }
</style>